import React, {memo, useEffect, useState} from 'react';
import CreateMusicStyle from "./IndexStyle";
import {PlusOutlined} from '@ant-design/icons';
import {
  Button,
  Form,
  Input,
  Select,
  Upload,
  Row, Col, UploadProps, message
} from 'antd';
import {MusicInsertDTO} from "../../../../interface/MusicInterface";
import {insertMusicAPI} from "../../../../services/music";
import {useNavigate} from "react-router-dom";
import UnitBox from "../../../../components/part/unitBox/UnitBox";
import {DictData} from "../../../../interface/SysDictDataInterface";
import {getSysDictData} from "../../../../services/sysDictData";

type Props = {};

export default memo(function CreateMusic(props: Props) {
  const {TextArea} = Input;
  const navigator=useNavigate();
  const [messageApi,contextHolder]=message.useMessage();
  /** 歌曲风格 */
  const [musicStyleList,setMusicStyleList]=useState<DictData[]>([]);
  /** 歌曲语言 */
  const [musicAreaType,setMusicAreaType]=useState<DictData[]>([]);
  /** 页面加载时执行 */
  useEffect(() => {
    /** 获取歌曲风格字典 */
    getSysDictData({dictType:"music_style"}).then((result:any)=>{
      setMusicStyleList(result.data.data.data);
    },(error)=>{
      console.log(error);
    });
    /** 获取歌曲语言字典 */
    getSysDictData({dictType:"area_type"}).then((result:any)=>{
      setMusicAreaType(result.data.data.data);
    },(error)=>{
      console.log(error);
    });
  }, []);

  const normFile = (e: any) => {
    if (Array.isArray(e)) {
      return e;
    }
    return e?.fileList[0].response?.data;
  };

  const onFinish = (values: MusicInsertDTO) => {
    console.log('Success:', values);
    // const audio=document.createElement("audio").duration;
    // console.log(audio);
    // console.log(values.url);
    // audio.src=values.url as string;
    // values.timer=0;
    // console.log(audio.duration);
    values.singerId=1;
    values.albumId=1;
    values.type=1;
    values.areaType=1;
    values.createUserId=parseInt(localStorage.getItem("yf_gaduation_zzmusic_user_id") as string);
    insertMusicAPI(values).then((result:any)=>{
      console.log(result);
      if(result.data.code===200){
        messageApi.open({
          type:"success",
          content:"新增音乐成功"
        });
        navigator("/creatorcenter");
      }else{
        messageApi.open({
          type:"error",
          content:result.data.msg
        });
      }
    },(error)=>{
      console.log(error);
    });
  };

  return (
    <CreateMusicStyle>
      {contextHolder}
      <UnitBox title="上传歌曲" isShowLine={true}>
        <Form
          labelCol={{span: 4}}
          wrapperCol={{span: 14}}
          layout="horizontal"
          className="create_music_form"
          size={"large"}
          onFinish={onFinish}
        >
          <Row gutter={20}>
            <Col className="gutter-row" span={12}>
              <Form.Item<MusicInsertDTO>
                label="音乐名称"
                name="name"
                rules={[{ required: true, message: '请输入歌曲名称' }]}
              >
                <Input/>
              </Form.Item>
            </Col>
            <Col className="gutter-row" span={12}>
              <Form.Item<MusicInsertDTO>
                name="singerName"
                label="演唱歌手"
                rules={[{ required: true, message: '请输入歌手名称' }]}
              >
                <Input/>
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={20}>
            <Col className="gutter-row" span={12}>
              <Form.Item<MusicInsertDTO> name="albumName" label="歌曲专辑">
                <Input/>
              </Form.Item>
            </Col>
            <Col className="gutter-row" span={12}>
              <Form.Item<MusicInsertDTO> name="areaType" label="歌曲语种">
                <Select>
                  {
                    musicAreaType.map((value)=>{
                      return(<Select.Option value={value.dictValue} key={value.sysDictDataId}>{value.dictLabel}</Select.Option>)
                    })
                  }
                </Select>
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={20}>
            <Col className="gutter-row" span={12}>
              <Form.Item<MusicInsertDTO> name="type" label="歌曲风格">
                <Select>
                  {
                    musicStyleList.map((value)=>{
                      return(<Select.Option value={value.dictValue} key={value.sysDictDataId}>{value.dictLabel}</Select.Option>)
                    })
                  }
                </Select>
              </Form.Item>

            </Col>
          </Row>

          <Row gutter={20}>
            <Col className="gutter-row" span={12}>
              <Form.Item<MusicInsertDTO> name="cover" label="歌曲封面" getValueFromEvent={normFile}>
                <Upload action={`${process.env.REACT_APP_BASE_URL}/upload/file`} maxCount={1} listType="picture-card">
                  <button style={{border: 0, background: 'none'}} type="button">
                    <PlusOutlined/>
                    <div style={{marginTop: 8}}>上传图片封面</div>
                  </button>
                </Upload>
              </Form.Item>
            </Col>
            <Col className="gutter-row" span={12}>
              <Form.Item<MusicInsertDTO> name="url" label="歌曲源文件"  getValueFromEvent={normFile}>
                <Upload action={`${process.env.REACT_APP_BASE_URL}/upload/file`} maxCount={1} listType="picture-card">
                  <button style={{border: 0, background: 'none'}} type="button">
                    <PlusOutlined/>
                    <div style={{marginTop: 8}}>上传源文件</div>
                  </button>
                </Upload>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={20}>
            <Col className="gutter-row" span={12}>
              <Form.Item<MusicInsertDTO> name="introduction" label="歌曲介绍">
                <TextArea ></TextArea>
              </Form.Item>

            </Col>
            <Col className="gutter-row" span={12}>
              <Form.Item<MusicInsertDTO> name="lyric" label="歌曲歌词" >
                <TextArea ></TextArea>
              </Form.Item>
            </Col>
          </Row>

          <div className="music_form_btn_box">
            <Form.Item<MusicInsertDTO> className="create_music_btn">
              <Button size={"large"} type="primary" htmlType="submit">
                上传音乐
              </Button>
            </Form.Item>
            <Form.Item<MusicInsertDTO> className="create_music_btn">
              <Button onClick={()=>{navigator("/creatorcenter")}} size={"large"}>返回</Button>
            </Form.Item>
          </div>



        </Form>
      </UnitBox>

    </CreateMusicStyle>
  );
});
